from django.shortcuts import render
from django.http import HttpResponse
from ManageApp import models
from ManageApp.utils.bootstrap import BootstrapForm
from ManageApp.utils.page_nav import PageNav


class TaskModelForm(BootstrapForm):
    class Meta:
        model = models.Task
        fields = '__all__'

def task_list(req):
    queryset = models.Task.objects.all().order_by("-id")
    page_nav_obj = PageNav(req, queryset)
    page_queryset = page_nav_obj.page_queryset
    page_nav_string = page_nav_obj.get_html()
    form = TaskModelForm()
    content = {
        "form": form,
        "queryset": page_queryset,
        "page_nav_string": page_nav_string
    }
    # 把content传给前端，即task_list页面，该页面传回的内容，
    # 如通过submit传回的内容，默认同样传给此函数
    return render(req, "task_list.html", content)

import json
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def task_ajax(req):
    # Ajax方式（局部更新）：不刷新页面也能与服务器交换数据
    # 你在一个窗口就能处理多个业务，不离开、不重新排队。
    # Ajax 的流程
    # 用户操作（点击按钮、选择下拉框等）
    # 触发 JavaScript 函数
    # 函数中通过 $.ajax() 向服务器发请求
    # 服务器处理请求
    # 返回数据（通常是 JSON）
    # 前端用 JavaScript 更新网页的部分内容
    # 常用方式
    # 动态加载内容	翻页、加载更多、切换标签页
    # 点赞、收藏等	点一下就变颜色，但不刷新整个页面
    # JS 通过 Ajax 或 fetch 等方式向服务器发 POST 请求
    # form 的 method="post" 是 HTML 的行为，不是 JS
    # 页面不会刷新，可以实现局部更新（这就是所谓的“异步提交”）
    json_string = json.dumps(req.GET)
    return HttpResponse(json_string)
@csrf_exempt
def task_add(req):
    form = TaskModelForm(data=req.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))
    data_dict = {"status": False, "error": form.errors}
    return HttpResponse(json.dumps(data_dict, ensure_ascii=False))
# [用户点击提交]
#         ↓
# [JS 采集表单数据并发送 POST 请求]
#         ↓
# [Django 后端处理数据，返回 JSON]
#         ↓
# [JS 判断结果]
#         → 成功 → alert 提示 + 刷新页面
#         → 失败 → 显示每个字段的错误信息
# 表单form不仅可以用<button type="submit">方式提交
# 也可以使用通过js使用Ajax方式传递，不必刷新网页
# 什么时候不进success支路
# 请求根本没发出去（网络断了）
# 后端抛了 500 错误、404 错误
# 后端返回了格式不对的数据（你期待 JSON，结果是 HTML）
# $("#btnAdd") 等价于 jQuery("#btnAdd")
# .click()：给它绑定点击事件
# .val()：获取或设置输入框的值
# .text()：设置文字
# .hide() / .show()：控制显示隐藏
# .empty()：清空里面的内容
# | jQuery 代码                     | 作用                         |
# | ----------------------------- | -------------------------- |
# | `$("#id_用户名").val()`          | 获取输入框的值                    |
# | `$(".error-msg").text("出错了")` | 设置 class 是 error-msg 的标签文本 |
# | `$("#btnAdd").click(fn)`      | 绑定按钮的点击事件                  |
# | `$(function(){ ... })`        | 页面加载完成后自动执行的函数             |
# 查找 id="btnAdd" 的这个 DOM 元素，返回的是一个 jQuery 对象，你就可以对它进行操作
# $.ajax()是调用ajax函数
